<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>logging</title>
    <script>
        function navigateToLink1() {
            window.location.href = "http://127.0.0.1:8080/static/menu.html";
        }
    </script>
    <style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    h1 {
        text-align: center;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    tr:hover {
        background-color: #f1f1f1;
    }
    button {
        display: block;
        width: 150px;
        padding: 12px;
        margin: 0 auto;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        transition: background 0.3s ease, transform 0.3s ease;
    }

    button:hover {
        background-color: #0056b3; /* 悬停时的背景颜色 */
        transform: scale(1.05);
    }

    button:active {
        transform: scale(0.95);
    }
    </style>
</head>
<body>
<button onclick="navigateToLink1()">菜单栏</button>
<h1>用户登录日志</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>登录时间</th>
            <th>IP地址</th>
            <th>登陆状态</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行将在这里被插入 -->
    </tbody>
</table>

   <script>
    // 定义一个函数来执行Ajax请求
    function fetchData() {
        const xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
        xhr.open('POST', '/data1', true); // 配置请求的类型、URL和是否异步

        // 设置请求完成后的回调函数
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 解析返回的JSON数据
                const data = JSON.parse(xhr.responseText);

                // 获取表格的tbody元素
                const tbody = document.querySelector('#data-table tbody');

                // 清空tbody中的现有内容（如果有的话）
                tbody.innerHTML = '';

                // 遍历数据并创建行
                data.forEach(item => {
                    const tr = document.createElement('tr');

                    // 创建单元格并设置内容
                    const idCell = document.createElement('td');
                    idCell.textContent = item.id;
                    tr.appendChild(idCell);

                    const usernameCell = document.createElement('td');
                    usernameCell.textContent = item.username;
                    tr.appendChild(usernameCell);

                    const timeCell = document.createElement('td');
                    // 将ISO格式的日期时间字符串转换为本地时间字符串
                    const localTime = new Date(item.time).toLocaleString();
                    timeCell.textContent = localTime;
                    tr.appendChild(timeCell);

                    // 新增IP地址单元格
                    const ipCell = document.createElement('td');
                    ipCell.textContent = item.ip; // 假设返回的JSON数据中包含ip字段
                    tr.appendChild(ipCell);

                    const statusCell = document.createElement('td');
                    statusCell.textContent = item.status; // 假设返回的JSON数据中包含status字段
                    // 可选：根据状态设置单元格的样式
                    if (item.status === 'successful') {
                        statusCell.style.backgroundColor = 'green';
                    } else {
                        statusCell.style.backgroundColor = 'red';
                    }
                    tr.appendChild(statusCell);

                    // 将行添加到tbody中
                    tbody.appendChild(tr);
                });
            } else {
                console.error('请求失败，状态码：', xhr.status);
            }
        };
        xhr.send();
    }

    // 调用函数以在页面加载时获取数据
    window.onload = fetchData;
</script>
</body>
</html>